<template>
    <div class="CollapseTextViewWrapper">
      <input :id="'exp' + id" class="exp" type="checkbox" />
      <div class="text" :id="'text' + id" :style="{'max-height': `${line * 1.5}em`}">
        <label class="btn" :for="'exp' + id"></label>
        {{ text }}
      </div>
    </div>
  </template>
  <script>
  export default {
    name: 'CollapseView',
    props: {
      text: {
        type: String,
        default: '好天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天天',
      },
      id: {
        type: Number,
        default:1,
      },
      line: {
        type: Number,
        default: 2,
      },
    },
  };
  </script>
  <style lang="less">
  .CollapseTextViewWrapper {
    display: flex;
    overflow: hidden;
    padding: 5px 0; /** hack for iView's table cell strange blank in vertical */
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: justify;
      position: relative;
      line-height: 1.5em;
      transition: 0.3s max-height ease-in-out;
    }
    .text::before {
      content: '';
      height: calc(100% - 18px);
      float: right;
    }
    .text::after {
      content: '';
      width: 999vw;
      height: 999vw;
      position: absolute;
      box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
      transition: .2s box-shadow ease-in-out;
      margin-left: -100px;
    }
    .btn {
      position: relative;
      float: right;
      clear: both;
      margin-left: 20px;
      color: rgb(0, 110, 255);
      cursor: pointer;
    }
    .btn::after {
      content: '展开';
    }
    .exp {
      display: none;
    }
    .exp:checked + .text {
      max-height: 999px;
    }
    .exp:checked + .text::after {
      visibility: hidden;
    }
    .exp:checked + .text .btn::before {
      visibility: hidden;
    }
    .exp:checked + .text .btn::after {
      content: '收起';
    }
    .btn::before {
      content: '...';
      position: absolute;
      left: -5px;
      color: #333;
      transform: translateX(-100%);
    }
  }
  /* 兼容ivew hover&highlight样式 */
  .ivu-table-row-hover,.ivu-table-row-highlight {
    .CollapseTextViewWrapper {
      .text::after {
        box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #ebf7ff;
      }
    }
  }
  </style>
  